<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="/static/dist/semantic/semantic.min.css">
    <link rel="stylesheet" href="/static/css/me.css">
</head>

<body  class="Site">
    <!-- 导航 -->
    <section id="home" style="background: url('https://zhuyougu-1315598583.cos.ap-guangzhou.myqcloud.com/blog/202212021945630.png')">
        <nav class="ui segment attached m-padded-tb-mini m-background-small m-fixed m-top m-height" style="z-index: 2" th:replace="_fragments :: menu(5)">
            <div class="ui secondary stackable menu m-margin-tb-mini">
                <h2 class="ui brown header item m-padded-mini">猪油骨</h2>
                <a href="#" class="right m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>首页</a>
                <a href="#" class="m-item item m-mobile-hide m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-fenlei1"></use>
                </svg> 分类</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-_biaoqian"></use>
                </svg> 标签</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-guidangrizhi"></use>
                </svg>归档</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-guanyuwomen2"></use>
                </svg>关于我</a>
                <a href="#" class="ui button m-item item m-mobile-hide m-padded-mini"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-sousuo1"></use>
                </svg>搜索</a>
            </div>
            <div class="ui modal m-container-mini">
                <i class="close icon"></i>
                <h2 class="ui grey header item ">请输入搜索内容</h2>
                <div class=" ui right icon input">
                    <input type="text" placeholder="搜索....">
                    <i class="search link icon"></i>
                </div>
            </div>
            </div>
            <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"
               style="background: rgba(0,0,0,0)"><i class="sidebar icon"></i></a>
        </nav>
        <div class="inner-width animated zoomIn">
            <div class="content">
                <h2 class="m-weight-none">每个人都很渺小，可每个人都拥有自己的宇宙。</h2>
                <h3 class="m-weight-none">忙有所值，闲有所趣。</h3>
                <div class="buttons m-margin-tb-tiny disabled">
                    <a href="#container" style="font-size: xx-large">关于我</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 中间 -->
    <div class="m-container m-padded-tb-big">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="eleven wide column animated rotateInDownLeft">
                    <div class="ui segment">
                        <img src="https://upload-bbs.mihoyo.com/upload/2021/05/14/271577943/f761baf336aa7c277d730802faa32bfc_5013712681493630848.jpg" alt="" class="ui rounded image">
                    </div>
                </div>
                <div class="five wide column  animated rotateInDownRight">
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="m-text">绞尽脑汁也没想出来好的介绍</p>

                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
                        <div class="ui orange basic left pointing label m-margin-tb-tiny">游戏</div>
                        <div class="ui orange basic left pointing label m-margin-tb-tiny">原</div>



                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">java</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
                        <div class="ui teal basic left pointing label m-margin-tb-tiny">vue</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="#" class="ui circular gitee icon button" data-content="https://gitee.com/zhuyougu10/personal-blog-project.git">
                            <svg class="icon1" aria-hidden="true">
                                <use xlink:href="#icon-gitee"></use>
                            </svg>
                        </a>
                        <a href="#" class="ui weChat circular icon button">
                            <svg class="icon1" aria-hidden="true">
                                <use xlink:href="#icon-weixin"></use>
                            </svg>

                        </a>
                        <a href="#" class="ui qq circular icon button" data-content="1937627852" data-position="bottom center">
                            <svg class="icon1" aria-hidden="true">
                                <use xlink:href="#icon-qq1"></use>
                            </svg>
                        </a>
                    </div>
                    <div class="ui weChatQR flowing popup transition hidden">
                        <img src="static/images/Cache_-79d079ba8ca743f7..jpg" th:src="@{/images/weixinhaoyou.jpg}" alt="" class="ui rounded image"
                             style="width: 100px">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <br>
    <br>
    <br>

    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-small m-position-bottom" th:replace="_fragments :: footer"
            style="background: rgba(241,204,200,0.3)">
        <div class="ui center aligned container">
            <p class="m-text-thin m-text-spaced" style="color: #0a001f">Copyright © 2022 猪油骨</p>
            <a href="http://beian.miit.gov.cn/" target="_blank"
               class="m-text-thin m-text-spaced">桂ICP备2022010618号</a>
        </div>
    </footer>
    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="/static/dist/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/dist/semantic/semantic.min.js" ></script>
    <script src="//at.alicdn.com/t/c/font_3778293_xwyqsa54yme.js"></script>
    <!--/*/th:block>/*/-->

    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
        $(function () {
            $(".ui.button.m-item").on("click", function () {
                $(".ui.modal").modal("show");
            })
        })

        $('.gitee').popup({
            position: 'bottom center'
        });
        $('.qq').popup({
            position: 'bottom center'
        });
        $('.weChat').popup({
                popup: $('.weChatQR'),
                position: 'bottom center'
            });


    </script>

</body>

</html>
